<template>
  <s-modal
    title="添加"
    :visible="visible"
    width="800px"
    ok-text="保存"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div style="height: 530px">
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <s-form-item label="父菜单" name="parentId">
            <s-select-tree
              v-model="formValue.parentId"
              allow-clear
              url="/menu/item/list"
              value-field="id"
              label-field="title"
              placeholder="父菜单"
            />
          </s-form-item>
          <s-form-item
            label="标题"
            name="title"
            :rules="[
              { whitespace: true, required: true, message: '标题' },
              { max: 50, message: '最长为50' }
            ]"
          >
            <s-input v-model="formValue.title" placeholder="标题" />
          </s-form-item>
          <s-form-item label="组件" name="component">
            <s-input v-model="formValue.component" allow-clear placeholder="组件" />
          </s-form-item>
          <s-form-item
            label="路径"
            name="path"
            :rules="[
              { whitespace: true, required: true, message: '路径不能为空' },
              { max: 50, message: '最长为50' }
            ]"
          >
            <s-input v-model="formValue.path" allow-clear placeholder="路径" />
          </s-form-item>
          <s-form-item label="图标" name="icon" :rules="[{ max: 50, message: '最长为50' }]">
            <s-input v-model="formValue.icon" allow-clear placeholder="图标" />
          </s-form-item>
          <s-form-item
            label="排序号"
            name="orderNum"
            :rules="[{ required: true, message: '排序号不能为空' }]"
          >
            <s-input-number v-model="formValue.orderNum" :min="1" :max="999" placeholder="排序号" />
          </s-form-item>
          <s-form-item label="角色列表" name="roleList">
            <s-tree
              ref="roleList"
              v-model="formValue.roleList"
              height="200px"
              url="/authority/role/selectList"
              value-field="id"
              placeholder="角色列表"
            />
          </s-form-item>
          <s-form-item label="权限列表" name="permissionList">
            <s-tree
              ref="permissionList"
              v-model="formValue.permissionList"
              height="200px"
              url="/authority/permission/selectList"
              value-field="id"
              placeholder="权限列表"
            />
          </s-form-item>
          <s-form-item
            label="备注"
            name="remark"
            size="big"
            :rules="[{ max: 200, message: '最长为200' }]"
          >
            <s-text-area v-model="formValue.remark" allow-clear placeholder="备注" />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
import { findInTree } from '@/utils/tree'
export default {
  name: 'Add',

  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false
    }
  },
  methods: {
    open(parentId) {
      this.formValue = {}
      this.formValue.parentId = parentId
      this.visible = true
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        const data = values
        data.permissionList = this.formatValue(
          data.permissionList,
          this.$refs.permissionList.getTreeData()
        )
        data.roleList = this.formatValue(data.roleList, this.$refs.roleList.getTreeData())
        this.confirmLoading = true
        this.$api
          .PUT('/menu/item/insert', data)
          .then((res) => {
            this.confirmLoading = false
            this.visible = false
            this.$emit('success')
            this.$message.info(res.msg)
          })
          .catch(() => {
            this.confirmLoading = false
          })
      })
    },
    formatValue(val, treeData) {
      const p = []
      if (val && val.length > 0) {
        val.forEach((item) => {
          const tmp = findInTree(treeData, 'id', item)
          p.push({ name: tmp.value, value: tmp.id })
        })
      }
      return p
    }
  }
}
</script>

<style lang="less" scoped></style>
